<template xmlns=''>
  <a-modal
    v-model='visible'
    title='预览'
    :width='800'
    style='top:5%;height: 85%;overflow-y: hidden;'
    :bodyStyle="{paddingBottom:'60px'}"
    @ok='handleOk'
    wrapClassName='ant-modal-cust-warp'
    :footer='null'
  >
    <a-carousel arrows dots-class='slick-dots slick-thumb'>
      <a slot='customPaging' slot-scope='props'>
        <img :src='getAtta(props.i).url' :alt='getAtta(props.i).name'/>
      </a>
      <div v-for='atta in attaList'>
        <img :src='atta.url' />
      </div>
    </a-carousel>
  </a-modal>
</template>

<script>


import {
  getUploadedPreviewFiles
} from '@/api/api'

export default {
  name: 'AttaImageModel',
  data() {
    return {
      attaList: [],
      title: '操作',
      visible: false
    }
  },
  methods: {
    showModal(record) {
      let _that = this

      getUploadedPreviewFiles({ attaIds: record.attaIds }).then((res) => {
        if(res.data){
          _that.attaList = res.data || []
        }
        _that.visible = true
      })

    },
    handleOk(e) {
      this.visible = false
    },
    handleCancel(e) {
      this.visible = false
      this.attaList = []
    },
    getAtta(i) {
      return this.attaList[i]
    }
  },
  created() {

  }

}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-dots {
  height: auto;
}

.ant-carousel >>> .slick-slide img {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 80%;
}

.ant-carousel >>> .slick-thumb {
  bottom: -45px;
}

.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}

.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}

.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>